<script setup>

import SonSonCom from './SonSonCom.vue'

// 子组件通过 props 接收父组件传递的数据
const props=defineProps({
msg:{
  type:String,
  required:true
}
})

// 1. 定义 emit
const emit=defineEmits(['update:msg'])
const sendMsg=()=>{
//  this.$emit('update:msg')
  // 2. 调用 emit，发送消息(触发事件)
emit('update:msg', '√子组件修改的数据->'+props.msg)
}
const myMsg='子组件自己内部的数据'
const validate=()=>{
  // console.log('内部实现了表单校验');
  alert('调用内部的表单校验')

}
// 默认情况下，通过模板引用取到的组件的公开实例，不会暴露任何在 <script setup> 中声明的绑定。
// 需要通过 defineExpose 主动暴露后，父组件才能调用组件的方法
defineExpose({
  myMsg,
  validate
})
</script>
<template>
<div class="son">
  <h2>子组件</h2>
  <p>{{msg}}</p>
  <button @click="sendMsg">点击发送消息</button>
  <SonSonCom />
</div>
</template>
<style scoped>
 .son{
    border: 5px solid gold;
  }

</style>
